<!-- 图表 -->
<template>
  <div class="chart">
    <div class="chart_title">
      <div class="left">{{ state.title }}</div>
      <div class="right" @click="chartLeftHandler">
        <SvgIcon name="left" width="14px" height="14px" color="#333" />
        <span>隐藏图表</span>
      </div>
    </div>
    <div class="total">
      <ul class="total_list">
        <li class="item">
          变压器 <span>{{ state.transformerTotal }}</span>
        </li>
        <li><el-divider direction="vertical" /></li>
        <li class="item">
          灯杆 <span>{{ state.lampPostTotal }}</span>
        </li>
        <li><el-divider direction="vertical" /></li>
        <li class="item">
          灯 <span>{{ state.lampTotal }}</span>
        </li>
      </ul>
    </div>
    <div class="echarts">
      <div class="item">
        <BarView :data="state.transformerList" :colors="['#9285FF']" v-if="state.transformerList.length" id="transformer"
          text="变压器区域分布" />
      </div>
      <div class="item">
        <BarView :data="state.lampPostList" :colors="['#328AFF']" v-if="state.lampPostList.length" id="lampPost"
          text="灯杆区域分布" />
      </div>
      <div class="item">
        <BarView :data="state.lampList" :colors="['#FEA23F']" v-if="state.lampList.length" id="lamp" text="灯区域分布" />
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { onMounted, reactive } from 'vue'
import { queryReportGet } from '@/api/usemap'
import BarView from './echarts/BarView.vue'
import useWarehouseStore from '@/store/modules/warehouse'
const WarehouseStore = useWarehouseStore()
const state = reactive({
  transformerTotal: 0,
  lampPostTotal: 0,
  lampTotal: 0,
  transformerList: [],
  lampPostList: [],
  lampList: [],
  title: '管理单位'
})

const index = async (value: string) => {
  if (value === 'type_1') {
    state.title = '行政区域'
  } else if (value === 'type_2') {
    state.title = '管理单位'
  } else if (value === 'type_3') {
    state.title = '中心运维'
  }
  const mapText: any = {}
  try {
    const { data } = await queryReportGet(value)
    state.transformerTotal = data.transformerTotal
    state.lampPostTotal = data.lampPostTotal
    state.lampTotal = data.lampTotal
    state.transformerList = data.transformerList
    state.lampPostList = data.lampPostList
    state.lampList = data.lampList
    state.transformerList.forEach((item: any) => {
      mapText[item.name] = {}
      mapText[item.name].transformer = item.number
    })
    state.lampPostList.forEach((item: any) => {
      mapText[item.name].lampPost = item.number
    })
    state.lampList.forEach((item: any) => {
      mapText[item.name].lamp = item.number
    })
    WarehouseStore.mapText = mapText
  } catch (error) {
    console.log(error)
  }
}

import useSettingStore from '@/store/modules/setting'
const SettingStore = useSettingStore()
//  左边图表显示隐藏
const chartLeftHandler = () => {
  SettingStore.foldLeft = !SettingStore.foldLeft
}

onMounted(() => {
  index('type_1')
})
defineExpose({
  index
})

</script>

<style scoped lang="scss">
.chart {
  position: absolute;
  top: 62px;
  left: 10px;
  z-index: 10;
  width: 400px;
  height: calc(100vh - 72px);
  background-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 16px;
  backdrop-filter: blur(10px);

  .chart_title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      font-size: 16px;
      font-weight: 600;
      padding-left: 10px;
      border-left: 4px solid #FF1040;
    }

    .right {
      display: flex;
      align-items: center;
      cursor: pointer;

      span {
        font-size: 14px;
        color: #606266;
      }
    }
  }

  .total {
    margin: 24px 0;

    .total_list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px;
      border-radius: 4px;
      border: 1px solid #D9D9D9;

      .item {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
        color: #606266;

        span {
          margin-left: 8px;
          font-size: 18px;
          font-weight: 500;
          color: #FF0F40;
        }
      }
    }
  }

  .echarts {
    .item {
      width: 100%;
      height: 200px;
      margin-bottom: 15px;
    }
  }
}
</style>